vue2.6之处理跨域 |
您所在的位置：网站首页 › axios 处理跨域 › vue2.6之处理跨域 |
vue2.6之处理跨域
|
这是我参与更文挑战的第10天，活动详情查看： 更文挑战 如题所示，今天来介绍下怎么在这个 vue 中处理这个跨域问题~ （主要也是之前学 vue 时踩的坑🕳 哈哈） 跨域介绍跨域是是由浏览器的同源策略造成的，同源策略是一个安全措施！能减少XSS、CSFR等的攻击。 同源是指，域名，协议，端口均相同 出现跨域 的原因 就有 协议不同 域名不同 端口不同 处理之前在java后端项目中，只要加个注解 @CrossOrigin 就可以解决这个问题，当热也可以通过Nginx 做反向代理就好了，但是现在需要在前端解决 怎么解决呢？ 回到我们之前使用过的 webpack 。 webpack官网之devServer vue中devServer的使用 在 vue.config.js 中配置如下代码即可 module.exports = { configureWebpack: { devServer: { proxy: { '/api': { target: 'http://192.168.101.110:8888', // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 changeOrigin: true, ws: true // , // pathRewrite: { // '^/api': '/api' // // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可 // } } } } } }这样就可以解决跨域问题了~ 当然还有其他很优秀的方案，也是无意中发现的，请看下面~ 文章推荐！： 下面这篇文章非常全面的概括了怎么处理跨域这个问题！ 包括下面这些👇 跨域解决方案1、 通过 jsonp 跨域 2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享（CORS） 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域 涨知识了！😝 👉 前端常见跨域解决方案（全） 最后欢迎小伙伴们来一起探讨问题~ 如果你觉得本篇文章还不错的话，那拜托再点点赞支持一下呀😝 让我们开始这一场意外的相遇吧！~ 欢迎留言！谢谢支持！ヾ(≧▽≦*)o 冲冲冲！！ 我是4ye 咱们下期很快再见！！ |
【本文地址】
今日新闻 |
推荐新闻 |